<template>
  <div class="app-header-sticky" :class="{ show: y >= 80 }">
    <div class="containr">
      <router-link to="/" class="logo"></router-link>
      <appheaderNav></appheaderNav>
      <div class="app-right">
        <router-link to="/">品牌</router-link>

        <router-link to="/">专题</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import appheaderNav from "../components/nav-header.vue";
import { reactive, toRefs, ref, computed, watch } from "vue";
import { useStore } from "vuex";
import { useWindowScroll } from "@vueuse/core";
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const store = useStore();

    const data = reactive({});

    
    // y为视图滚动的距离
    let { y } = useWindowScroll();

    return { ...toRefs(data), y };
  },
  components: {
    appheaderNav,
  },
};
</script>
<style scoped lang='less'>
.app-header-sticky {
  width: 1240px;
  margin: 0 auto;
  background-color: white;
  z-index: 9999;
  position: fixed;
  left: 50%;
  transform: translate(-50%);
  top: -200px;
  opacity: 0;
  transition: all 0.3s linear;
  .containr {
    display: flex;
    align-items: center;
    .logo {
      width: 200px;
      height: 80px;
      background: url(../assets/img/logo.png) no-repeat right 2px;
      background-size: 160px auto;
    }
  }
  .app-right {
    width: 160px;
    display: flex;
    border-left: 2px solid @xtxColor;
    font-size: 16px;
    justify-content: space-around;
    text-align: center;
    padding-left: 20px;
    a {
      &:hover {
        color: @xtxColor;
        border-bottom: 1px @xtxColor solid;
      }
    }
  }
}
div.show {
  top: 0;
  opacity: 1;
}
</style>
